<template>
  <div class="app-container">
    <div class="big_box">
      <div class="left_box">
        <el-card class="box-card" shadow="hover" >
          <div class="right_box1" style="float: left">
            <h1 align="center"> 排队中</h1>
            <el-table v-loading="" :data="baseinfoList" @selection-change=""  height="800px" style="font-size: 20px">
              <el-table-column label="序号" align="center" prop="USERNAME" />
              <el-table-column  label="手牌" align="center" prop="BIRTH" />
              <el-table-column  label="时间" align="center" prop="TIME" />
            </el-table>

          </div>
          <div class="br" style="float: left"></div>
          <div class=" button " style="float: left" align="center">
            <el-button class="button1" type="primary" icon="el-icon-arrow-left" @click="" ></el-button>
            <el-button class="button1" type="primary" icon="el-icon-arrow-right"  @click="" ></el-button>
          </div>
          <div class="br" style="float: left"></div>
          <div class="right_box1" style="float: left">
            <h1 align="center"> 服务中</h1>
            <el-table v-loading="" :data="baseinfoList" @selection-change=""  height="800px" style="font-size: 20px">
              <el-table-column label="序号" align="center" prop="USERNAME" />
              <el-table-column label="手牌" align="center" prop="BIRTH" />
              <el-table-column label="时间" align="center" prop="TIME" />
            </el-table>

          </div>

        </el-card>
      </div>
      <div class="br"></div>
      <div class="right_box">
        <el-card class="box-card" shadow="hover" >
          <div class="xs">
            <br>
            <br>
            <br>
            <h1 align="center"> 当前服务：</h1>
            <h1 align="center"> 9762牌、9762牌、9762牌、9762牌</h1>
            <hr>
            <h1 align="center"> 下一位:9762牌</h1>

          </div>
        </el-card>
        <br>
        <el-card class="box-card" shadow="hover" >
          <div  class="xs2" style="align-content: center">
            <br><br><br><br><br>

            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" >


              <el-form-item label="手牌号" prop="USERNAME" label-width="150px" >
                <el-input
                  v-model="queryParams.USERNAME"
                  clearable
                  placeholder=""
                />
              </el-form-item>
              <div style="text-align: right;margin-right:90px;">
                <br><br><br><br>
                <el-form-item>
                  <el-button class="button1" type="primary" icon=""  @click="" >读手牌</el-button>

                  <el-button class="button1" type="primary" icon="" @click="" >操 作</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>




  </div>

</template>

<script>

export default {
  data() {

    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        USERNAME: ''
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      baseinfoList: [{
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }]
    }
  },

  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
}


</script>



<style lang="scss" scoped>
.big_box{display: flex;}
.br{width: 3%;height: 900px;}
.left_box{width: 70%;height: 900px;}
.xs{height: 350px}
.xs2{height: 650px}
.right_box{width: 30%;height: 900px;}
.right_box1{width: 35%;height: 900px;}
.br2{width: 24%;height: 900px;}
.button{display: flex;align-items: center;justify-content: center;width: 24%;height: 900px;}
.button2{align-items: center;justify-content: center;}
.button1{width: 125px;height: 125px;}
</style>
<template>
  <div class="app-container">
    <div class="big_box">
      <div class="left_box">
        <el-card class="box-card" shadow="hover" >
          <div class="right_box1" style="float: left">
            <h1 align="center"> 排队中</h1>
            <el-table v-loading="" :data="baseinfoList" @selection-change=""  height="750px"  border style="font-size: 20px">
              <el-table-column label="序号" align="center" prop="USERNAME" />
              <el-table-column  label="手牌" align="center" prop="BIRTH" />
              <el-table-column  label="时间" align="center" prop="TIME" />
            </el-table>

          </div>
          <div class="br" style="float: left"></div>
          <div class=" button " style="float: left" align="center">
            <el-button class="button3" type="primary" icon="el-icon-arrow-left"  @click="" ></el-button>
            <el-button class="button3" type="primary" icon="el-icon-arrow-right"  @click="" ></el-button>
          </div>
          <div class="br" style="float: left"></div>
          <div class="right_box1" style="float: left">
            <h1 align="center"> 服务中</h1>
            <el-table v-loading="" :data="baseinfoList" @selection-change=""  height="750px" border  style="font-size: 20px">
              <el-table-column label="序号" align="center" prop="USERNAME" />
              <el-table-column label="手牌" align="center" prop="BIRTH" />
              <el-table-column label="时间" align="center" prop="TIME" />
            </el-table>

          </div>

        </el-card>
      </div>
      <div class="br"></div>
      <div class="right_box">
        <el-card class="box-card" shadow="hover" >
          <div class="xs">
            <br>
            <br>
            <br>
            <h1 align="center"> 当前服务：</h1>
            <h1 align="center"> 9762牌、9762牌、9762牌、9762牌</h1>
            <hr>
            <h1 align="center"> 下一位:9762牌</h1>

          </div>
        </el-card>
        <br>
        <el-card class="box-card" shadow="hover" >
          <div  class="xs2" style="align-content: center">
            <br><br><br><br><br>

            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" >


              <el-form-item label="手牌号" prop="USERNAME" label-width="150px" >
                <el-input
                  v-model="queryParams.USERNAME"
                  clearable
                  placeholder=""
                />
              </el-form-item>
              <div style="text-align: right;margin-right:90px;">
                <br><br><br><br>
                <el-form-item>
                  <el-button class="button1" type="primary" icon=""  @click="" > <h1>读手牌</h1> </el-button>

                  <el-button class="button1" type="primary" icon="" @click="" ><h1>操 作</h1></el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>




  </div>

</template>

<script>

export default {
  data() {

    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        USERNAME: ''
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      baseinfoList: [{
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      },   {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }, {
        USERNAME: '王小虎',
        BIRTH: '111111',
        TIME: '2016-05-02'
      }]
    }
  },

  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
}


</script>



<style lang="scss" scoped>
.big_box{display: flex;}
.br{width: 3%;height: 900px;}
.left_box{width: 70%;height: 900px;}
.xs{height: 350px}
.xs2{height: 650px}
.right_box{width: 30%;height: 900px;}
.right_box1{width: 35%;height: 900px;}
.br2{width: 24%;height: 900px;}
.button{display: flex;align-items: center;justify-content: center;width: 24%;height: 900px;}
.button2{align-items: center;justify-content: center;}
.button1{width: 125px;height: 75px;}
.button3{width: 125px;height: 75px;font-size: 50px}
</style>
